<template>
  <div>
    <form action="/">
      <van-search
        v-model="kw"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @input="onInput"
        @cancel="onCancel"
      />
    </form>
    <van-divider />
    <template v-if="list.length == 0">
      <div class="history">
        <div class="title">最近搜索</div>
        <div>
          <van-tag v-for="item in histories" type="default" :key="item">{{ item }}</van-tag>
        </div>
      </div>
    </template>
    <template v-else>
      <van-cell v-for="item in list" :key="item" :title="item" />
    </template>
  </div>
</template>

<script>
import Store from '@/utils/store'
const store = new Store('local')
export default {
  data() {
    return {
      kw: '',
      list: [],
      histories: store.get('histories', [])
    }
  },
  methods: {
    // 回车搜索，完成搜索功能
    onSearch(val) {
      let bool = this.histories.some(item => item == val)
      // 如果找到则马上停止,全部找不到，则返回false
      if (!bool) {
        this.histories.unshift(val)
        this.histories = this.histories.slice(0, 3)
        store.set('histories', this.histories)
      }
    },
    onInput(val) {
      this.list = new Array(20).fill('').map((_, index) => index + 1 + this.kw)
    },
    // 点击 取消 文字事件
    onCancel() {
      this.list = []
    }
  }
}
</script>

<style lang="scss" scoped>
.history {
  padding: 5px;
  font-size: 18px;
  .title {
    margin-bottom: 10px;
  }
  .van-tag--default {
    padding: 5px;
    margin-right: 10px;
  }
}
</style>
